<!--
 * @Description:
 * @Author: william
 * @Date: 2025-02-17 16:47:40
 * @LastEditors: william
 * @LastEditTime: 2025-03-26 14:33:35
-->
<template>
  <BaseDialog
    v-model="dialogVisible"
    :title="title"
    width="850px"
    :before-close="handleClose"
  >
    <el-descriptions
      v-loading="viewLoading"
      :column="2"
      border
      :label-width="140"
    >
      <el-descriptions-item width="200">
        <template #label>{{ $t('hotel.orderId') }}</template>
        {{ formData.id || '--' }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('fleet.customerName') }}</template>
        {{ formData.customerName || '--' }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('fleet.customerContact') }}</template>
        {{ formData.customerContact || '--' }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('fleet.contactPhone') }}</template>
        {{ formData.customerContactPhone || '--' }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('fleet.customerEmail') }}</template>
        {{ formData.customerContactEmail || '--' }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('hotel.businessType') }}</template>
        <span>{{
          g_options.getOptionText(
            g_options.businessTypeOptions,
            formData.businessType,
            '--'
          )
        }}</span>
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('hotel.hotelInfo') }}</template>
        {{ formData.hotel || '--' }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('hotel.bookingTime') }}</template>
        {{ formData.bookTime || '--' }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('hotel.checkInTime') }}</template>
        {{ formData.startTime || '--' }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('hotel.personCount') }}</template>
        {{ formData.peopleCount || '--' }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('hotel.amount') }}</template>
        {{ formData.price || '--' }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('hotel.priceType') }}</template>
        <span>{{
          g_options.getOptionText(
            g_options.priceTypeOptions,
            formData.priceType,
            '--'
          )
        }}</span>
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('hotel.payType') }}</template>
        <span>{{
          g_options.getOptionText(
            g_options.orderPayMethod2Options,
            formData.payType,
            '--'
          )
        }}</span>
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('hotel.responsiblePerson') }}</template>
        {{ formData.responsiblePerson || '--' }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('hotel.signPerson') }}</template>
        {{ formData.signPerson || '--' }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('public.createTime') }}</template>
        {{ formData.createTime || '--' }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('fleet.emergencyContact') }}</template>
        {{ formData.customerEmergencyContact || '--' }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('fleet.emergencyContactPhone') }}</template>
        {{ formData.customerEmergencyContactPhone || '--' }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('public.remark') }}</template>
        {{ formData.note || '--' }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('fleet.orderStatus') }}</template>
        <span
          class="dot-status"
          :class="
            g_options.getOptionText(
              g_options.bookingOrderStatusOptions,
              formData.status,
              '--',
              'class'
            )
          "
          >{{
            g_options.getOptionText(
              g_options.bookingOrderStatusOptions,
              formData.status,
              '--'
            )
          }}</span
        >
      </el-descriptions-item>
    </el-descriptions>
    <template #footer>
      <div class="detail-dialog-footer">
        <el-button plain @click="handleClose">{{
          $t('public.close')
        }}</el-button>
        <el-button
          v-if="type === 'confirm'"
          plain
          type="primary"
          @click="handleConfirm"
          >{{ $t('public.confirm') }}</el-button
        >
      </div>
    </template>
  </BaseDialog>
</template>

<script setup>
const props = defineProps({
  type: {
    type: String,
    default: 'view' // view | confirm
  },
  id: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['update'])
const dialogVisible = defineModel({
  type: Boolean,
  default: false
})
const title = computed(() =>
  props.type === 'confirm' ? g_t('hotel.roomBookConfirm') : g_t('public.detail')
)
const viewLoading = ref(false)
const formData = ref({})

onMounted(() => {
  getFormData()
})

const getFormData = () => {
  viewLoading.value = true
  g_api.hotel
    .apiHotelOrderDetail({ id: props.id })
    .then(({ code, data }) => {
      if (code === '200' && data) {
        formData.value = data
      }
    })
    .finally(_ => {
      viewLoading.value = false
    })
}

const handleClose = () => {
  dialogVisible.value = false
}

const handleConfirm = () => {
  g_api.hotel.apiHotelOrderConfirm({ id: props.id }).then(res => {
    if (res.code === '200') {
      ElMessage({
        message: res.message,
        type: 'success'
      })
      handleClose()
      emit('update')
    }
  })
}
</script>

<style scoped lang="scss"></style>
